<script setup lang="tsx">
import { nextTick, ref } from 'vue';
import Modal from '@/components/common/modal.vue';
import { findInnerEqpName, findOuterEqpName } from '@/service/api/modules/collection-management/borehole-data';
import CodeList from './code-list.vue';

const props = defineProps({
  type: {
    type: String,
    default: () => 'inner'
  }
});

interface Emits {
  (e: 'search', model: any): void;
}

const subEqpId = ref(window.$utils.getRouteParams());

const emit = defineEmits<Emits>();
const model = defineModel<any>('model', { required: true });

const visible = ref(false);
const codeListRef = ref(null);
function search() {
  emit('search', model.value);
}

function reset() {
  model.value.equipmentId = null;
  model.value.time = null;
  if (['inner', 'outer'].includes(subEqpId.value)) {
    model.value.subEqpName = null;
  }
  emit('search', model.value);
}

function serachCode() {
  visible.value = true;
}

function handleOk() {
  nextTick(() => {
    model.value.equipmentId = codeListRef.value.currentSelect;
    visible.value = false;
    emit('search', model.value);
  });
}

const options = ref([]);

function getOpens() {
  findInnerEqpName().then(({ error, data }) => {
    if (!error) {
      options.value = data;
    }
  });
}
function getOpens1() {
  findOuterEqpName().then(({ error, data }) => {
    if (!error) {
      options.value = data;
    }
  });
}

const filterOption = (input: string, option: any) => {
  return option.value.toLowerCase().includes(input.toLowerCase());
};

if (['inner', 'outer'].includes(subEqpId.value)) {
  if (props.type === 'inner') {
    getOpens();
  } else {
    getOpens1();
  }
}
</script>

<template>
  <ACard :title="null" :bordered="false" class="search-card card-wrapper">
    <AForm
      :model="model"
      :label-col="{
        span: 5,
        md: 7
      }"
      class="search-form"
    >
      <div class="w-full flex">
        <ARow :gutter="[15, 8]" wrap class="w-full">
          <ACol :span="24" :md="12" :lg="8" :xl="8" :xxl="6">
            <AFormItem label="设备代码" name="equipmentId" class="m-0" :label-col="{}">
              <AInputGroup compact>
                <AInput
                  v-model:value="model.equipmentId"
                  style="width: calc(100% - 63px)"
                  class="min-form-control"
                  autocomplete="off"
                  @keypress.enter="search"
                />
                <AButton type="primary" class="mini-btn" @click="serachCode">搜索</AButton>
              </AInputGroup>
            </AFormItem>
          </ACol>

          <ACol v-if="['inner', 'outer'].includes(subEqpId)" :span="24" :md="12" :lg="6" :xl="6" :xxl="6">
            <AFormItem label="设备名称" name="subEqpName" class="m-0" :label-col="{}">
              <ASelect
                v-model:value="model.subEqpName"
                show-search
                placeholder="请选择设备名称"
                allow-clear
                :filter-option="filterOption"
                class="min-form-control"
                @keypress.enter="search"
              >
                <ASelectOption v-for="item in options" :key="item.subEqpName" :value="item.subEqpName">
                  {{ item.subEqpName }}
                </ASelectOption>
              </ASelect>
            </AFormItem>
          </ACol>

          <ACol :span="24" :md="12" :lg="8" :xl="8" :xxl="6">
            <AFormItem label="时间范围" name="time" class="m-0" :label-col="{}">
              <ARangePicker
                v-model:value="model.time"
                show-time
                class="min-form-control"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </AFormItem>
          </ACol>
          <div class="flex">
            <AFormItem class="m-0">
              <div class="w-full flex-y-center justify-end gap-12px">
                <AButton type="primary" ghost class="mini-btn" @click="search">
                  <template #icon>
                    <icon-ic-round-search class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">查询</span>
                </AButton>

                <AButton class="mini-btn" @click="reset">
                  <template #icon>
                    <icon-ic-round-refresh class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.reset') }}</span>
                </AButton>
              </div>
            </AFormItem>
          </div>
        </ARow>
      </div>
    </AForm>
  </ACard>
  <Modal v-model:visible="visible" title="代码列表" height="70vh" width="800px" @ok="handleOk">
    <CodeList ref="codeListRef" />
  </Modal>
</template>

<style></style>
